<template>
  <bm-overlay
    ref="customOverlay"
    :class="{ sample: true }"
    :style="pointSize"
    pane="labelPane"
    @draw="draw"
  >
  </bm-overlay>
</template>

<script>
import { BmOverlay } from "vue-baidu-map";
export default {
  props: ["text", "position", "color", "sizeParams"], // 用来接受传入的值，用来定制样式
  components: {
    BmOverlay,
  },
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload(); // 当位置发生变化时，重新渲染，内部会调用draw
      },
      deep: true,
    },
  },
  data() {
    return {
      pointSize: {},
    };
  },
  mounted() {
    // let width = this.text.value / this.sizeParams / 3.1415926;
    let width = 6;
    this.pointSize = {
      width: width + "px",
      height: width + "px",
      borderRadius: width + "px",
    };
  },
  methods: {
    // 这是百度地图的重绘函数,用于维持覆盖物的位置（这里的值貌似会影响拖拉时的偏移度）
    draw({ el, BMap, map }) {
      const { lng, lat } = this.position;
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      el.style.left = pixel.x - 8 + "px";
      el.style.top = pixel.y - 8 + "px";
    },
  },
};
</script>

<style>
.sample {
  line-height: 32px;
  background: #dc4b32;
  overflow: hidden;
  color: #fff;
  text-align: center;
  opacity: 1;
  position: absolute;
}
.sample.active {
  /* background: rgba(0, 0, 0, 0.75); */
  background: #dc4b32;
  color: #fff;
}
</style>
